<template>
  <div class="shop-con">
    <div class="bannerbox">
        <img class="backimg" src="../../assets/images/newimg/bg.jpg" alt="" />
    </div>
      <!-- 头部标题 -->
    <!--<div class="head">-->
        <!--&lt;!&ndash;<img src="../../assets/images/newimg/back.png" alt="">&ndash;&gt;-->
        <!--<span>想加盟</span>-->
    <!--</div>-->
    <div class="banner">
      <!--swiper-->
      <div class="swiperouterbox">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide box_siz" v-for="(str,index) in data.detailImgArray" :key="index">
              <!--//:style="{ backgroundImage: 'url(' + str.url + ') no-repeat right' }"-->
              <img :src="str.detailImg" alt="" />
            </div>
          </div>
          <!--<div class="swiper-pagination"></div>-->
        </div>
      </div>
    </div>
    <div class="shop">
      <div class="phto">
        <img :src="data.pic" alt="">
        <span>{{data.name}}</span>
      </div>
      <div class="shop-info">
        <div>
          <img src="../../assets/images/newimg/phone.png" alt="">
          <span>{{data.phone}}</span>
        </div>
        <div>
          <img src="../../assets/images/newimg/address.png" alt="">
          <span>{{data.address}}</span>
        </div>
      </div>
    </div>

    <!-- 商家详情 -->
    <div class="detail">
      <h4>商家介绍:</h4>
      <p>{{data.content}}</p>
      <!--<img src="../../assets/images/newimg/xia.png" alt="">-->
    </div>

    <div class="video">
      <video :src="data.radio" controls="controls">
      您的浏览器不支持 video 标签。
      </video>
    </div>
  </div>
</template>
<script>
  import Swiper from 'swiper'
  import '../../assets/swiper.min.css'
export default {
  data () {
    return {
      businessId: '',
      data: ''
    }
  },
  methods: {

  },
  mounted () {
    var that = this
    this.businessId = this.$route.params.businessId
    this.$http({
      method: 'get',
      url: 'http://api.wangjianxin.top/getBusinessInfo?businessId=' + this.businessId
    }).then(function (res) {
      if (res.status === 200) {
        that.data = res.data
        var swiper = new Swiper('.swiper-container', {
          loop: false,
          initialSlide: 0,
          observer: true,
          centeredSlides: true, //true 为slide居中
          autoplay: true, //zidong
          onTouchEnd: function() {
            swiper.startAutoplay()
          }
        })
      }
    })
  }
}
</script>
<style scoped>
  .bannerbox{
    width: 7.5rem;
    height: 100%;
    margin:0;
  }
.backimg {
  width: 7.5rem;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -99;
  }
    /* 标题 */
  .head{
    width: 7.5rem;
    height: 1rem;
    background: #111111;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display:none;
  }
  .head img{
    width: .2rem;
    position: absolute;
    left: .3rem;
    top: .35rem
  }
  .head span{
    font-size: .3rem;
    color: #fff;
  }
  /* banner图 */
  .banner{
    height: 4rem;
    width: 100vw;
    overflow: hidden;
    background: #ccc;
  }
  .banner img{
    width: 100%;

  }
  .shop{
    padding: .4rem .2rem;
    border-bottom: .01rem solid #444;
  }
  .shop,.phto{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #1d1d1d;
    color: #fff;
    font-size: .3rem;
  }
  .phto img{
    height:0.9rem;
    width: .9rem;
    margin-right: .3rem;
    border-radius:50%;
  }
.shop-info{
  padding-right: .2rem;
}
.shop-info div:last-child{
  padding-top: .2rem;
}
.shop-info div img{
  width: .3rem;
}
.detail{
  color: #D9D9D9;
  font-size: .24rem;
  background: #1d1d1d;
  padding: .2rem;
}
.detail h4{
  font-size: .26rem;
  color:#F4C08E
}
.detail p{
  padding-top: .2rem;
  text-indent: 2em;
  line-height: .4rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.detail img{
  padding-left: 49%;
  padding-top: .2rem;
  width: .3rem;
}

.video{
  width: 90%;
  margin: .3rem 5% 0;
  border-radius: .2rem;
  background: #ccc;
  overflow: hidden;
  height: 3rem;
}
.video video{
  width: 100%;
  height: 100%;

}

</style>
